<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

  <title>Materialize - Documentation</title>

  <!-- Favicons -->
  <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
  <meta name="msapplication-TileColor" content="#FFFFFF">
  <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
  <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">

  <!-- Android 5 Chrome Color -->
  <meta name="theme-color" content="#EE6E73">

  <link href="../../../bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--  <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />-->
<!--  <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>-->
  <link href="../../../css/prism.css" rel="stylesheet" />
</head>

<body>


<body>
            <br>
    <div class="container">
        <div class="row">
          <div class="col s12">
            <a id="newData" class="waves-effect waves-light btn">Add new tag data</a>
            <a id="getData" class="waves-effect waves-light btn">Get current tag data</a>
          </div>
        </div>
        <form>
            <div class="row">
                <div class="col s6 offset-s6"><b class="white-text">Default:</b></div>
            </div>
            <div class="row">
                <div class="input-field col s6">
                    <input id="icon_telephone" type="tel" class="validate">
                    <label for="icon_telephone">Telephone</label>
                </div>
                <div class="input-field col s6">
                    <div class="chips chips-data"></div>
                    <label for="chips">Tags</label>
                </div>
            </div>
        </form>
        <form class="modified">
            <div class="row">
                <div class="col s6 offset-s6"><b class="white-text">Modified proposal:</b></div>
            </div>
            <div class="row">
                <div class="input-field col s4">
                    <i class="material-icons prefix">phone</i>
                    <input id="icon_telephone" type="tel" class="validate">
                    <label for="icon_telephone">Telephone</label>
                </div>
                <div class="input-field col s4">
                    <i class="material-icons prefix">bookmark</i>
                    <div class="chips first"></div>
                    <label for="chips-1">Tags</label>
                </div>
                <div class="input-field col s4">
                    <i class="material-icons prefix">bookmark</i>
                    <div class="chips second chips-data"></div>
                    <label for="chips-2">Tags</label>
                </div>
            </div>
        </form>
    </div>
</body>

<!--  Scripts-->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="../../../bin/materialize.js"></script>
<!--     <script src="js/velocity.min.js"></script>-->
<!--  <script src="js/leanModal.js"></script>-->
    <script type="text/javascript">
    $( document ).ready(function() {
      $('.chips:not(.chips-data)').material_chip({
          data: [{
              tag: "Tag"
          }]
      })

      $('.chips.chips-data').material_chip({
        data: [{
          tag: 'Apple',
        }, {
          tag: 'Microsoft',
        }, {
          tag: 'Google',
        }],
        placeholder: 'Enter a tag',
        secondaryPlaceholder: '+Tag',
      })

      $('#newData').click(function () {
        $('.chips.chips-data').material_chip({
          data: [{
            tag: 'New Data 1',
          }, {
            tag: 'New Data 2',
          }, {
            tag: 'New Data 3',
          }],
          placeholder: 'Enter a tag',
          secondaryPlaceholder: '+Tag',
        })
      });

      $('#getData').click(function () {
        console.log($('.chips.chips-data').material_chip('data'));
      });
    });
    </script>

</body>
</html>
